﻿<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
    <!-- Dropdownhover CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-dropdownhover.min.css" type="text/css">
    <!-- latest fonts awesome -->
    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css" type="text/css">
    <!-- simple line fonts awesome -->
    <link rel="stylesheet" href="assets/simple-line-icon/css/simple-line-icons.css" type="text/css">
    <!-- stroke-gap-icons -->
    <link rel="stylesheet" href="assets/stroke-gap-icons/stroke-gap-icons.css" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/jcarousel.connected-carousels.css" type="text/css">
    <!--  baguetteBox -->
    <link rel="stylesheet" href="assets/css/baguetteBox.css">
    <!-- Owl Carousel Assets -->
    <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 导入页眉 -->
<div class="header"></div>
<!-- newsletter -->
<section class="grid-shop">
    <!-- .grid-shop -->
    <div id="goods_vue" class="container">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">商品详情</li>
                </ol>
                <div class="row">
                    <!-- left side -->
                    <div class="col-sm-5 col-md-5">
                        <!-- product gallery -->
                        <div class="connected-carousels">
                            <div class="stage">
                                <div class="carousel carousel-stage">
                                    <ul>
                                        <li><img class="zoom_01" v-bind:src="goods.headUrl" alt="qoute-icon" width="480px" height="480px"/></li>
                                        <li v-for="goodsUrl in goods.goodsUrlList"><img class="zoom_01" v-bind:src="goodsUrl.url" alt="qoute-icon" width="480px" height="480px"></li>
                                    </ul>
                                </div>
                                <p class="photo-credits">
                                    Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
                                </p>
                                <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
                                <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                            </div>

                            <div class="navigation">
                                <a href="#" class="prev prev-navigation">&lsaquo;</a>
                                <a href="#" class="next next-navigation">&rsaquo;</a>
                                <div class="carousel carousel-navigation">
                                    <ul>
                                        <li><img v-bind:src="goods.headUrl" width="110" height="110" alt=""></li>
                                        <li v-for="goodsUrl in goods.goodsUrlList"><img v-bind:src="goodsUrl.url" width="110" height="110" alt=""></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- / product gallery -->
                    </div>
                    <!-- left side -->
                    <!-- right side -->
                    <div class="col-sm-7 col-md-7">
                        <!-- .pro-text -->
                        <div class="pro-text product-detail">
                            <!-- /.pro-img -->
                            <span class="span1">{{goods.name}}</span>
                            <a href="#">
                                <h4> {{goods.summary}} </h4>
                            </a>
                            <div class="star2">
                                <ul>
                                    <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><a href="#">月销量：{{goods.salesVolume}}</a></li>
                                    <li><a href="#"> 店铺名：{{goods.shopName}}</a></li>
                                </ul>
                            </div>
                            <div v-if="goods.currentPrice===null">
                                <p><strong>${{goods.originalPrice}}</strong></p>
                            </div>
                            <div v-else>
                                <p><strong>${{goods.currentPrice}}</strong><span class="line-through">${{goods.originalPrice}}</span>
                                </p>
                            </div>
                            <p class="in-stock">
                                <span>
                                    分类:<span>{{goods.category}}</span>
                                </span>
                                &nbsp&nbsp&nbsp
                                <span v-if="goods.appearance===null">
                                   材质: <span>{{goods.material}}</span>
                                </span>
                                <span v-else>
                                    表面：<span>{{goods.appearance}}</span>
                                </span>
                                &nbsp&nbsp&nbsp
                                <span v-if="goods.function===null">
                                   类型: <span>{{goods.controlType}}</span>
                                </span>
                                <span v-else>
                                    感受：<span>{{goods.function}}</span>
                                </span>
                            </p>
                            <ul class="ul-content">
                                <div v-for="goodsSize in goods.goodsSizeQoList">
                                    <div v-if="nowGoodsId==goodsSize.goodsId">
                                            <div class="btn btn-danger active">
                                                {{goodsSize.size}}
                                            </div>
                                    </div>
                                    <div v-else>
                                            <div class="btn btn-danger" v-on:click="changeGoodsSize(goodsSize.goodsId)">
                                                {{goodsSize.size}}
                                            </div>
                                    </div>
                                    <br>
                                </div>
                            </ul>
                            <form>
                                <div class="numbers-row">
                                    <input id="good_num" type="text" name="french-hens" id="french-hens" value="1">
                                </div>
                            </form>
                            <a href="#" class="btn addtocart2" v-on:click="addShopCart">添加到购物车</a>
                            <a href="#" class="hart"><span class="icon icon-Heart"></span></a>
                            <div class="share">
                                <p>Share:</p>
                                <ul>
                                    <li>
                                        <a href="http://www.facebook.com/sharer.php?u=http://zcube.in/platin/platin/products-detail.html"
                                           target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                                    <li>
                                        <a href="https://twitter.com/share?url=http://zcube.in/platin/platin/products-detail.html"
                                           target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
                                    <li>
                                        <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://zcube.in/platin/platin/products-detail.html"
                                           target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                            <div class="tag">
                                <p>优惠券: <span>Bags, Blazers, Boots, Jackets, Pants, Shirts.</span></p>
                                <p>活动: <span>outerwear.</span></p>
                                <p>库存: <span>{{goods.totalNum}}</span></p>
                            </div>
                        </div>
                        <!-- /.pro-text -->
                    </div>
                </div>
                <div class="row">
                    <div class="tab-bg">
                        <ul>
                            <li class="active"><a data-toggle="tab" href="#home">商品详情</a></li>
                            <li><a data-toggle="tab" href="#menu1">售后服务</a></li>
                            <li><a data-toggle="tab" href="#menu2">用户评价</a></li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div id="home" class="tab-pane fade in active">
                            <p>商品内容</p>
                            <!--                            <ul>-->
                            <!--                                <li>Claritas est etiam processus dynamicus.</li>-->
                            <!--                                <li>Qui sequitur mutationem consuetudium lectorum.</li>-->
                            <!--                                <li>Claritas est etiam processus dynamicus.</li>-->
                            <!--                                <li>Qui sequitur mutationem consuetudium lectorum.</li>-->
                            <!--                                <li>Claritas est etiam processus dynamicus.</li>-->
                            <!--                                <li>Qui sequitur mutationem consuetudium lectorum.</li>-->
                            <!--                            </ul>-->
                            <p>{{goods.content}}</p>
                        </div>
                        <div id="menu1" class="tab-pane fade">
                            <p>{{goods.afterSale}}</p>
                            <ul>
                                <li>Claritas est etiam processus dynamicus.</li>
                                <li>Qui sequitur mutationem consuetudium lectorum.</li>
                                <li>Claritas est etiam processus dynamicus.</li>
                                <li>Qui sequitur mutationem consuetudium lectorum.</li>
                                <li>Claritas est etiam processus dynamicus.</li>
                                <li>Qui sequitur mutationem consuetudium lectorum.</li>
                            </ul>
                        </div>
                        <div id="menu2" class="tab-pane fade">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the industry's standard dummy text ever since the 1500s, when anunknown printer
                                took a galley of type and scrambled it to make a type specimen book. It has survived not
                                only five centuries, but also the leap into electronic typesetting, remaining
                                essentially unchanged. It was popularised in the 1960s with the release of Letraset
                                sheets containing Lorem Ipsum passages..</p>
                            <ul>
                                <li>Claritas est etiam processus dynamicus.</li>
                                <li>Qui sequitur mutationem consuetudium lectorum.</li>
                                <li>Claritas est etiam processus dynamicus.</li>
                                <li>Qui sequitur mutationem consuetudium lectorum.</li>
                                <li>Claritas est etiam processus dynamicus.</li>
                                <li>Qui sequitur mutationem consuetudium lectorum.</li>
                            </ul>
                            <p>It has survived not only five centuries, but also the leap into electronic typesetting,
                                remaining essentially unchanged. It was popularised in the 1960s with the release.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="owl-demo-outer">
                    <!-- #owl-demo -->
                    <div id="owl-demo8" class="deals-wk2">
                        <div class="item">
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/2.jpg" alt="2"> <sup
                                            class="sale-tag">sale!</sup>
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/3.jpg" alt="2">
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/5.jpg" alt="2">
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/7.jpg" alt="2">
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>

                        </div>
                        <div class="item">
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/2.jpg" alt="2"> <sup
                                            class="sale-tag">sale!</sup>
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/3.jpg" alt="2">
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/5.jpg" alt="2">
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-3">
                                <!-- .pro-text -->
                                <div class="pro-text text-center">
                                    <!-- .pro-img -->
                                    <div class="pro-img"><img src="assets/images/products/digital/7.jpg" alt="2">
                                        <!-- .hover-icon -->
                                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                                class="icon icon-Restart"></span></a></div>
                                        <!-- /.hover-icon -->
                                    </div>
                                    <!-- /.pro-img -->
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p> <a href="#" class="add-btn">Add to cart</a>
                                    </div>
                                </div>
                                <!-- /.pro-text -->
                            </div>

                        </div>
                        <!-- /#owl-demo -->
                    </div>
                </div>
            </div>
            <!-- right side -->
        </div>
    </div>
    <!-- /.grid-shop -->
</section>
<!-- 导入页脚 -->
<div class="footer"></div>
<!-- sticky-socia -->
<aside id="sticky-social">
    <ul>
        <li><a href="#" class="fa fa-facebook" target="_blank"><span><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</span></a>
        </li>
        <li><a href="#" class="fa fa-twitter" target="_blank"><span><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</span></a>
        </li>
        <li><a href="#" class="fa fa-rss" target="_blank"><span><i class="fa fa-rss" aria-hidden="true"></i> RSS</span></a>
        </li>
        <li><a href="#" class="fa fa-pinterest-p" target="_blank"><span><i class="fa fa-pinterest-p"
                                                                           aria-hidden="true"></i> Pinterest</span></a>
        </li>
        <li><a href="#" class="fa fa-share-alt" target="_blank"><span><i class="fa fa-share-alt" aria-hidden="true"></i> Flickr</span></a>
        </li>
    </ul>
</aside>
<!-- /sticky-socia -->
<p id="back-top"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></p>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-dropdownhover.min.js"></script>
<script src="assets/js/incrementing.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- owl carousel -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!--  Custom Theme JavaScript  -->
<script src="assets/js/custom.js"></script>
<!--  jcarousel Theme JavaScript  -->
<script type="text/javascript" src="assets/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="assets/js/jcarousel.connected-carousels.js"></script>
<script type="text/javascript" src="assets/js/jquery.elevatezoom.js"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
<!--======vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });
    var goodsId=null;
    var goods_vue = new Vue({
        el: '#goods_vue',
        data: {
            goods: [],
            nowGoodsId:"",
        },
        methods: {
            getUrlParam: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            },
            getGoodsId: function () {
                thisObj = this;
                let id = this.getUrlParam("id");
                goodsId = id;
                console.log("goodsid:"+goodsId);
            },
            getGoods: function () {
                let url = "detail/goods/" + goodsId;
                this.nowGoodsId = goodsId;
                let goodsObj = this;
                doGet(url, function (resp) {
                    goodsObj.goods = resp;
                    console.log(goodsObj.goods);
                })
            }
            ,
            addShopCart: function () {
                thisObj = this;
                let url = "addGoods";
                let num = $("#good_num").val();
                let addGoodsId = this.goods.id;
                let params = {goodsNum: num, goodsId: addGoodsId};
                doPost(url,params,function (resp) {
                    alert(resp);
                })
            },
            changeGoodsSize: function (goodsId) {
                let url = "detail/goods/" + goodsId;
                this.nowGoodsId = goodsId;
                let goodsObj = this;
                doGet(url, function (resp) {
                    goodsObj.goods = resp;
                })
            }
        } ,
        mounted: function () {
            this.getGoodsId();
            this.getGoods();
        }
        ,
    })
</script>